<template>
  <div>
    <component-api class="mt0" :items="props" :descriptions="propsDescs" title="Props"></component-api>
    <component-api :items="slots" title="Slots"></component-api>
    <component-api :items="events" title="Events"></component-api>
  </div>
</template>

<script>
  import WApp from "../../../../../src/components/app/WApp.vue";

  const propsDescs = {
    block:
      "Sets the layout to <code>display: block</code>. By default the layout is: <code>display: flex</code>, <code>flex-direction: column</code>.",
    dark: false, // Hide the prop.
  };

  const slots = {
    default: { description: "The content of the app." },
  };

  const eventsDescs = {};

  export default {
    data: () => ({
      propsDescs,
      slots,
    }),

    computed: {
      // Reads all the props and events directly from the component, so that as soon as a new prop or event
      // is added it will appear even if no description is yet provided.
      props() {
        return WApp.props;
      },
      events() {
        return (WApp.emits || []).reduce(
          (obj, label) =>
            (obj[label] = { description: eventsDescs[label] || "" }) && obj,
          {}
        );
      },
    },
  };
</script>